<template>
  <div class="list">
    <table>
      <caption>人员列表</caption>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>职务</th>
        <th>薪资</th>
        <th>入职时间</th>
      </tr>
 
      <tr v-for="(item,index) in lists" :key="index">
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
        <td>{{item.age}}</td>
        <td>{{item.port}}</td>
        <td>{{item.salary}}</td>
        <td>{{item.inputTime}}</td>
      </tr>

    </table>
  </div>
</template>

<script>
export default {
  name : 'ListPerson',
  data(){
    return {
      lists : [
        {name : 'aa', gender : 0 , age: 18, port : 1, salary : 10000, inputTime : '2020.05-11'},
        {name : 'aa2', gender : 1 , age: 28, port : 2, salary : 4000, inputTime : '2020.05-12'},
        {name : 'aa3', gender : 0 , age: 19, port : 3, salary : 5000, inputTime : '2020.05-13'},
        {name : 'aa4', gender : 1 , age: 23, port : 4, salary : 2500, inputTime : '2020.05-14'},
        {name : 'aa5', gender : 0 , age: 22, port : 5, salary : 8000, inputTime : '2020.05-15'}, 
      ] 
    }
  }
}
</script>

<style scoped>
.list table{
  border: 1px solid gray;
}

</style>